<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
    <script src="myjs/base.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">

</head>
<link rel="stylesheet" href="css/index.css">
<body>
<div id="app" style="width: 100%;height: 100%;">
    <el-container style="height: 100%">
        <el-container>
            <el-header style="height: 74px;padding-top: 10px;">
                <myhead img-url="image/YYDS.png" title="YYDS影院" :user-msg="userMsg" ></myhead>
            </el-header>

            <el-container>
                <el-main>

                <div style="border: 1px solid;margin: 30px 10%;height: 900px;width: 80%">
                    <div style="display: inline-block;border-right: 1px solid;width: 15%;height: 860px;float: left;padding: 20px 5px;background-color: #eeeeee">
                        <p style="text-align: center;font-size: 30px;" >个人中心</p>
                        <div style="margin-top: 50px">
                            <el-menu :default-active="activeIndex" class="el-menu-demo" @select="change" >
                                <el-menu-item index="1" >我的订单</el-menu-item>
                                <el-menu-item index="2" >基本信息</el-menu-item>
                            </el-menu>
                        </div>
                    </div>
                    <div style="display: inline-block;width: 75%;margin: 50px 10px 0 50px;clear: right">
                       <div v-if="activeIndex==='2'">
                           <div style="display:inline-block;border: 1px solid;padding: 10px;position: relative;bottom: 150px">
<!--                               <el-image :src="userMsg.image" style="width: 200px; height: 200px;border: 3px solid #a0cfff" fit="fit"></el-image><br>-->
<!--                               <el-button type="info" plain>更换头像</el-button>-->

                               <el-upload name="image"
                                          class="avatar-uploader"
                                          action="UploadImageServlet.s"
                                          :show-file-list="false"
                                          :on-success="handleAvatarSuccess"
                                          :before-upload="beforeAvatarUpload">
                                   <img v-if="userMsg.image" :src="userMsg.image" class="avatar">
                                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                               </el-upload>
                           </div>
                           <div style="display: inline-block;margin-left:  150px;">
                               <el-form :model="userMsg"  label-width="80px" :rules="rules">
                                   <el-form-item label="帐号">
                                       <el-input v-model="userMsg.userzh" readonly></el-input>
                                   </el-form-item>
                                   <el-form-item label="昵称">
                                       <el-input v-model="userMsg.username"></el-input>
                                   </el-form-item>
                                   <el-form-item label="性别">
                                       <el-radio-group v-model="userMsg.gender">
                                           <el-radio label="男"></el-radio>
                                           <el-radio label="女"></el-radio>
                                       </el-radio-group>
                                   </el-form-item>
                                   <el-form-item label="注册时间">
                                       <span>{{mytime(userMsg.time)}}</span>
                                   </el-form-item>
                                   <el-form-item label="邮箱" prop="email">
                                       <el-input v-model="userMsg.email" ></el-input>
                                   </el-form-item>
                                   <el-form-item label="手机号码"  prop="phone">
                                       <el-input v-model="userMsg.phone" @input="phoneYz" ></el-input>
                                   </el-form-item>
<!--                                   <el-form-item label="喜好">-->
<!--                                       <el-checkbox-group v-model="userMsg.hoby">-->
<!--                                           <el-checkbox label="hoby" v-for="(hoby,index) in hobys" :key="index"></el-checkbox>-->
<!--                                       </el-checkbox-group>-->
<!--                                   </el-form-item>-->
                                   <el-form-item label="钱包余额">
                                       <span>{{userMsg.money}}</span>
                                   </el-form-item>
                                   <el-form-item>
                                       <el-button type="primary" @click="saveUserMsg">保存</el-button>
                                   </el-form-item>
                               </el-form>
                           </div>
                       </div>

                        <div v-if="activeIndex==='1'" >
                            <h1>我的订单</h1>
                            <el-table :data="tableData" stripe style="width: 100%">
                                <el-table-column prop="indentid" label="订单号" >

                                </el-table-column>

                                <el-table-column prop="moviename" label="电影">

                                </el-table-column>
                                <el-table-column prop="cinemaname" label="影厅">

                                </el-table-column>
                                <el-table-column prop="cinemadesc" label="类型">

                                </el-table-column>
                                <el-table-column prop="seat" label="座位"  width="120">

                                </el-table-column>
                                <el-table-column prop="time" label="时间">
                                    <template slot-scope="scope">
                                        <p >{{turnTime(scope.row.starttime)}}<span>开始</span></p>
                                        <p >{{turnTime(scope.row.endtime)}}<span>散场</span></p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="money" label="金额">

                                </el-table-column>

                                <el-table-column prop="indenttime" label="订单创建时间">
                                    <template slot-scope="scope">
                                        <span>{{mytime(scope.row.indenttime)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="ispay" label="支付状态">
                                    <template slot-scope="scope">
                                      <span>{{paytype(scope.row.ispay)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="退款">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="open(scope.row)">取消订单</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                    </div>
                </div>


                </el-main>
                <el-footer style="padding: 0px;">
                    <!-- footer -->
                    <footer class="footer" style="min-width: 1380px;">
                        <div class="footer-inner">
                            <h3 class="homeico footer-inner-logo"></h3>
                            <p class="footer-inner-links">
                                <a href="https://www.1905.com/about/aboutus/" target="_blank">关于我们</a><span>|</span>
                                <a href="https://www.1905.com/sitemap.html" target="_blank">网站地图</a><span>|</span>
                                <a href="https://www.1905.com/jobs/" target="_blank">诚聘英才</a><span>|</span>
                                <a href="https://www.1905.com/about/copyright/" target="_blank">版权声明</a><span>|</span>
                                <a href="https://www.1905.com/about/contactus/" target="_blank">联系我们</a><span>|</span>
                                <a href="https://www.1905.com/error_report/error_report-p-pid-125-cid-126-tid-128.html" target="_blank">帮助与反馈</a><span>|</span>
                                <a href="https://www.1905.com/link/" target="_blank">友情链接</a><span>|</span>
                                <a href="https://www.1905.com/cctv6/advertise/" target="_blank">CCTV6广告招商</a><!--<span>|</span>
                <a href="javascript:void(0)">合作媒体</a>-->
                            </p>
                            <div class="footer-inner-bottom">
                                <a href="https://www.1905.com/about/licence/" target="_blank" >网络视听许可证0107199号</a>
                                <a href="https://www.1905.com/about/cbwjyxkz/" target="_blank" >出版物经营许可证</a>
                                <a href="https://www.1905.com/about/jyxyc/" target="_blank" >经营性演出许可证</a>
                                <a href="https://www.1905.com/about/gbdsjm/" target="_blank" >广播电视节目制作经营许可证</a>
                                <br>
                                <a href="https://www.1905.com/about/beian/" target="_blank">企业法人营业执照</a>
                                <a href="https://www.1905.com/about/zzdxyw/" target="_blank">增值电信业务经营许可证</a>
                                <a href="https://beian.miit.gov.cn" target="_blank">京ICP备12022675号</a>
                                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010202000300" target="_blank">京公网安备 11010202000300号</a>
                                <br>
                                <ul class="links-ul">
                                    <li v-for="name in linksdata.data" style="float: left;display:inline-block; margin-right:23px;">
                                        <a :href="name.linkurl">
                                            {{name.linkname}}
                                        </a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </footer>
                    <!-- 版权 -->
                    <div class="copy-right" style="min-width: 1380px;width: 100%">
                        <div class="copy-right-conts clearfix">
                            <div class="right-conts-left fl">
                                <span>CopyRight © 2022</span>
                                <em>电影频道节目中心官方网站</em><em class="conts-left-margin">|</em>
                                <em>
                                    <a href="https://www.1905.com/about/icp/" target="_blank">京ICP证100935</a>
                                </em>
                            </div>
                        </div>
                    </div>
                    <!--返回顶部-->
                    <!--                    <div style="width: 100%;height: 100%;">-->

                    <!--                        <el-backtop :bottom="60"></el-backtop>-->

                    <!--                        </div>-->
                    <div>
                        <template>
                            <el-backtop  :bottom="100">
                                <div
                                        style="{
                                                height: 100%;
                                                width: 100%;
                                                background-color: #f2f5f6;
                                                box-shadow: 0 0 6px rgba(0,0,0, .12);
                                                text-align: center;
                                                line-height: 40px;
                                                color: #1989fa;
                                              }"
                                >
                                    UP
                                </div>
                            </el-backtop>
                        </template>
                    </div>
                </el-footer>

            </el-container>
        </el-container>
    </el-container>
</div>
<script>
    var v =new Vue({
        el:'#app',
        data:{
            linksdata:{},
            activeIndex:'1',
            tableData:[],
            userMsg:{userid:''},
            uploadUrl:'',
            rules: {
              email:[
                { type:'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ],
                phone: [
                    { min: 11, max: 11, message: '请输入正确手机号', trigger: 'change' }
                ],

            },

        },
        created(){
            this.getUserMsg();
            this.get();
        },
        computed:{
          mytime(time=0){
              return (time=0)=>{
                  return  new Date(time).toLocaleString()
              }
          },
            turnTime(time=0){
                return (time=0)=>{
                    return new Date(time).toLocaleString().substr(10,5);
                }
            },
            paytype(pay=0){
              return (pay=0)=>{
                  return pay===1?'已支付':'未支付';
                }
            }
        },
        methods:{
            // 上传成功后的回显
            handleAvatarSuccess(res, file) {
                this.userMsg.image = res.data;
                this.$forceUpdate();
            },
            // 上传前对类型大小的验证
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' | 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            get(){
                var pathName = document.location.pathname;
                var index = pathName.substr(1).indexOf("/");
                var result = pathName.substr(0,index+1);
                this.uploadUrl=result;

            },
             getUserMsg(){
                console.log("获取用户")
                axios.get("GetUserMessageServlet.s").then(res=>{
                    console.log('赋值数据');
                    if (res.data.data!=null){
                        this.userMsg=res.data.data;
                        this.queryIndent();
                    }
                });
            },
            phoneYz(e){
                this.userMsg.phone=e.replace(/[^\d]/g, '');
            },
            saveUserMsg(){
                var params = new URLSearchParams();
                for (let name in this.userMsg){
                    params.append(name,this.userMsg[name]);
                }
                axios.post("UserUpdateMsgServlet.s",params).then(res=>{
                    if (res.data.code===1){
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                        this.getUserMsg();
                    }else {
                        this.$message.error(res.data.msg);
                    }
                    this.$forceUpdate();
                });
            },
            change(index){
                 this.activeIndex=index;
                if (this.activeIndex==='1'){
                    this.queryIndent();
                }
                this.$forceUpdate()
            },
            open(id){
                this.$confirm('确定要取消订单吗', '放映前1小时内不能取消订单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.cancelOrder(id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
             queryIndent(){
                console.log('获取数据');
                   axios.get("IndentQueryServlet.s",{
                    params:{
                        userid:this.userMsg.userid,
                    }
                }).then(res=>{
                    console.log('生成数据')
                    this.tableData = res.data.data;
                    this.$forceUpdate();
                });

            },
            cancelOrder(msg){
                axios.get("CancelIndentServlet.s",{
                    params:{
                        userid:this.userMsg.userid,
                        indentid:msg.indentid,
                        starttime:new Date(msg.starttime).getTime()
                    }
                }).then(res=>{
                    if (res.data.code===1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getUserMsg();
                        this.$forceUpdate();
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            },

        }
    });
</script>

</body>

<style>
    .el-menu-item{
       text-align: center;
        background-color: #eeeeee;
        font-size: 25px;
        font-weight: 15;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</html>
